<template>
  <div class="container">
    <van-nav-bar
      title="更新管理"
      left-arrow
      :right-text="buildType"
      @click-right="show=true"
      @click-left="()=>{$router.back()}"
    />
    <div class="list">
      <BaseList ref="list"  :option="listOption" @load="loadData" >
        <div slot-scope="props" slot="item" :class="[isOverDate(props.data)?'overdate':'']">
          <div class="item" >
              <span v-if="props.data.FromVersionName && props.data.FromVersionName" class="version-info">版本:{{props.data.FromVersionName}}<br/>{{props.data.FromVersionCode}}</span>
              <span v-if="!(props.data.FromVersionName && props.data.FromVersionName)" class="version-info" > 所有版本</span>
              <van-icon name="arrow"/>
              <span class="version-info">版本:{{props.data.VersionName}}<br/>{{props.data.VersionCode}}</span>
              <div class="tag">
                  <van-tag v-if="props.data.IsPatch" type="success">差分</van-tag>
                  <van-tag v-if="props.data.IsForce" type="danger" >强制</van-tag>
                  <van-tag v-if="props.data.VersionName == latestVersion.VersionName && props.data.VersionCode == latestVersion.VersionCode" type="primary">最新</van-tag>
              </div>
          </div>
        </div>
      </BaseList>
    </div>
    <div class="float-btn" @click="showAddUpdate=true">
      <img src="../assets/icon_add.png">
    </div>
    <van-actionsheet v-model="show" :actions="buildTypes" />
    <van-popup v-if="showAddUpdate" v-model="showAddUpdate" position="bottom">
      <AddUpdate :appType="$route.params.appType" :buildType="buildType" />
    </van-popup>
  </div>
</template>

<script>
import { Toast } from 'vant'
import BaseList from '@/components/common/Baselist'
import AddUpdate from '@/components/AddUpdate'
export default {
  components: { BaseList,AddUpdate },
  data() {
    return {
      show:false,
      pageIndex: 0,
      pageSize: 20,
      data: [],
      buildTypes:[],
      buildType:'',
      showAddUpdate: false,
      latestVersion:{},
      listOption: {
        needRefresh: true,
        needLoadMore: true
      }
    }
  },
  mounted() {
    this.getBuildTypes()
  },
  computed:{

  },
  methods: {
    isOverDate(data) {
      if(!(data.FromVersionName && data.FromVersionName) && !(data.VersionName == this.latestVersion.VersionName && data.VersionCode == this.latestVersion.VersionCode)) {
        return true;
      }
      if(data.FromVersionName && data.FromVersionName && data.IsForce) {
        return false;
      }
      if(data.VersionName == this.latestVersion.VersionName && data.VersionCode == this.latestVersion.VersionCode) {
        return false;
      }
      return true;
    },
    getBuildTypes() {
      this.buildTypes = ['develop', 'product'].map(d => {
        return {
          name: d,
          callback: () => {
            this.show = false
            this.buildType = d
            this.loadData(0)
          }
        }
      })
      if (this.buildTypes.length > 0) {
        this.buildType = this.buildTypes[0].name
      }
    },
    loadData(type) {
      const data = {
        appType: this.$route.params.appType,
        buildType: this.buildType
      }
      this.$axios.post('/api/updates', data).then(res => {
        let data = []
        if (res.data.result == 'success') {
          data = data.concat(res.data.data)
        } else {
          console.log(res.data.msg)
        }
        if (type == 0) {
          this.pageIndex = 0
          this.data = []
        } else {
          this.pageIndex++
        }
        this.data = this.data.concat(data)
        let latest = null;
        this.data.forEach(d1=>{
          if (!latest || latest['VersionName'] < d1['VersionName']) {
                        latest = d1;
                    }
        })
        this.latestVersion = latest;
        this.$refs.list.onDataChange(this.data, true)
      })
    }
  }
}
</script>

<style scoped>
.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
}
.list {
  flex: 1;
  overflow: scroll;
}
.item {
  margin: 10px;
  border-width: 1px;
  border-style: solid;
  border-color: beige;
  position: relative;
  padding: 8px;
  flex:1;
  display: flex;
  align-items: center;
}
.version-info {
  display: inline-block;
  font-size: 14px;
  color: #777777;
  flex:1;
}
.overdate {
 text-decoration: line-through
}
.tag {
  position: absolute;
  right: 5px;
  top:5px;
  font-size: 12px;
  color: white;
}
.force-update {
  padding: 3px;
  border-radius: 3px;
  background-color: #ff5651;
}
.latest-version {
  padding: 3px;
  border-radius: 3px;
  background-color: #0093ff;
}
.float-btn {
  width:50px;
  height: 50px;
  position: absolute;
  background-color: white;
  bottom:100px;
  left:30px;
  border-style: solid;
  border-width: 2px;
  border-color: #ff5651;
  display: flex;
  box-shadow: 1px 1px 3px #888888;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
}
</style>

